<template>
  <el-dropdown trigger="click"
               @command="handleSetLanguage">
    <i class="icon-zhongyingwen"></i>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in langList"
                        :key="item.locale"
                        :disabled="language===item.locale"
                        :command="item.locale">{{item.name}}</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from "vuex";
import { getLang, setLang } from '../../../api/admin/dict'
export default {
  name: "top-lang",
  data () {
    return {
      langList: []
    };
  },
  created () { },
  mounted () {
    this.getLang()
  },
  computed: {
    ...mapGetters(["language", "tag", 'currentModule', 'userInfo'])
  },
  watch: {
    currentModule: {
      handler: 'getLang'
    }
  },
  props: [],
  methods: {
    getLang () {
      getLang('/admin').then(res => {
        this.langList = res.data.data
      })
    },
    handleSetLanguage (lang) {
      setLang('/admin', lang, this.userInfo.username + '$' + this.userInfo.orgId).then(res => {
        this.$i18n.locale = lang;
        this.$store.commit("SET_LANGUAGE", lang);
        let tag = this.tag;
        let title = lang === 'en_US' ? tag.meta.menuEnName : tag.label
        //根据当前的标签也获取label的值动态设置浏览器标题
        this.$router.$avueRouter.setTitle(title);
        window.location.reload()
      })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
